<template>
  <div>
    <h-box>
      <el-row type="flex" :gutter="15" align="middle" slot="footer">
        <el-col>
          <el-input placeholder="请输入手机号" v-model="searchForm.mobile" prefix-icon="el-icon-mobile-phone">
            <el-button @click="handleSearch('mobile')" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col>
          <el-input placeholder="请输入会员卡号" v-model="searchForm.cardCode" prefix-icon="el-icon-star-off">
            <el-button @click="handleSearch('cardCode')" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col class="hui-text-right">
          <!-- 操作下拉，start -->
          <el-dropdown @command="handleCommand" split-button type="primary" size="small" placement="bottom-end" trigger="click" class="hui-mr-1">
            批量操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled>群发微信消息</el-dropdown-item>
              <el-dropdown-item command="sendWxMessageToFiliter">向筛选出的用户群发微信</el-dropdown-item>
              <el-dropdown-item command="sendWxMessageToSelection">向已选中的用户群发微信</el-dropdown-item>

              <el-dropdown-item disabled divided>群发短信消息</el-dropdown-item>
              <el-dropdown-item command="sendSmsToFiliter">向筛选出的用户群发短信</el-dropdown-item>
              <el-dropdown-item command="sendSmsToSelection">向已选中的用户群发短信</el-dropdown-item>

              <el-dropdown-item disabled divided>打标签</el-dropdown-item>
              <el-dropdown-item command="tagToFiliter">给筛选出的用户打标签</el-dropdown-item>
              <el-dropdown-item command="tagToSelection">给已选中的用户打标签</el-dropdown-item>

              <el-dropdown-item disabled divided>发会员卡</el-dropdown-item>
              <el-dropdown-item command="sendCardToFiliter">向筛选出的用户发会员卡</el-dropdown-item>
              <el-dropdown-item command="sendCardToSelection">向已选中的用户发会员卡</el-dropdown-item>

              <el-dropdown-item disabled divided>发优惠券</el-dropdown-item>
              <el-dropdown-item command="sendCouponToFiliter">向筛选出的用户发优惠券</el-dropdown-item>
              <el-dropdown-item command="sendCouponToSelection">向已选中的用户发优惠券</el-dropdown-item>

              <el-dropdown-item disabled divided>发红包</el-dropdown-item>
              <el-dropdown-item command="sendLuckyToFiliter">向筛选出的用户发红包</el-dropdown-item>
              <el-dropdown-item command="sendLuckyToSelection">向已选中的用户发红包</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 操作下拉，end -->
        </el-col>
      </el-row>
    </h-box>

    <el-table :data="customer.list" stripe class="hui-mt-1" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="资料">
        <template slot-scope="scope">
          <div class="hui-flex hui-flex--y-center">
            <h-image mode="background-image" :src="scope.row.headimgurl" size="88px" border-radius="2px" class="hui-mr-1"></h-image>
            <div>
              <div class="hui-w-100 hui-font-weight-primary">{{ scope.row.nickName }}</div>
              <div class="hui-w-100">手机: <span class="hui-font-number">{{ scope.row.mobile }}</span></div>
              <div class="hui-w-100">性别: {{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '未知' }}</div>
              <div class="hui-w-100">
                <el-tag v-if="scope.row.subscribe === 1" type="success" size="small">关注中</el-tag>
                <el-tag v-else type="info" size="small">未关注</el-tag>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="消费">
        <template slot-scope="scope">
          <div>累计消费次数: <span class="hui-font-number">{{ scope.row.tradeCount }}</span> 次</div>
          <div>累计消费金额: <span class="hui-font-number">{{ scope.row.tradeAmountSum / 100 | currency('￥', 2) }}</span></div>
          <div>首次消费时间: <span class="hui-font-number">{{ scope.row.tradeTimeFrist !== undefined ? $moment.unix(scope.row.tradeTimeFrist).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></div>
          <div>末次消费时间: <span class="hui-font-number">{{ scope.row.tradeTimeLast !== undefined ? $moment.unix(scope.row.tradeTimeLast).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></div>
        </template>
      </el-table-column>
      <el-table-column label="储值卡">
        <template slot-scope="scope">
          <div>累计储值次数: <span class="hui-font-number">{{ scope.row.balanceAddCount }}</span> 次</div>
          <div>累计储值金额: <span class="hui-font-number">{{ scope.row.balanceAddAmountSum / 100 | currency('￥', 2) }}</span></div>
          <div>累计使用次数: <span class="hui-font-number">{{ scope.row.balanceMinusCount }}</span> 次</div>
          <div>累计使用金额: <span class="hui-font-number">{{ scope.row.balanceMinusAmountSum / 100 | currency('￥', 2) }}</span></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="primary" size="mini" plain>查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页，start-->
    <el-pagination @current-change="handleCurrentChange" :current-page.sync="customer.pages" :page-sizes="[20]" :page-size="20" layout="total, sizes, prev, pager, next" :total="customer.total" background class="hui-mt-2"></el-pagination>
    <!--分页，end-->
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      customer: {
        total: 0,
        pages: 0,
        list: []
      },
      selection: [],
      searchForm: {
        mobile: '',
        cardCode: ''
      }
    }
  },
  created () {
    this.initMock()
  },
  methods: {
    // 模拟数据
    initMock () {
      let pages = this.customer.pages
      let total = 100
      let list = this.customer.list
      let i = 20
      while (i > 0) {
        list.push({
          uid: i,
          // openidMp: this.$randomString(),
          // openidWa: this.$randomString(),
          // unionidAc: this.$randomString(),
          // openidMw: this.$randomString(),
          // unionidMw: this.$randomString(),
          subscribe: this.$randomNumber(0, 1),
          nickName: this.$randomEnum(this.$store.state.nickName),
          sex: this.$randomNumber(0, 2),
          country: '中国',
          province: '福建',
          city: '厦门',
          headimgurl: this.$randomEnum(this.$store.state.image),
          // subscribeTime: 1524557457,
          // subscribeTimeFrist: 1524557457
          mobile: '13262268525',
          tradeCount: this.$randomNumber(0, 20),
          tradeAmountSum: this.$randomNumber(0, 2000000),
          tradeTimeFrist: this.$randomNumber(1483200000, 1514735999),
          tradeTimeLast: this.$randomNumber(1514736000, 1525104000),
          balanceAddCount: this.$randomNumber(0, 10),
          balanceAddAmountSum: this.$randomNumber(0, 2000000),
          balanceMinusCount: this.$randomNumber(0, 40),
          balanceMinusAmountSum: this.$randomNumber(0, 2000000)
        })
        i--
      }
      this.customer.total = total
      this.customer.pages = pages + 1
      this.customer.list = list
      // console.table(this.customer.list)
    },

    // 搜索事件
    handleSearch (type) {
      switch (type) {
        case 'mobile':
          const mobile = this.searchForm.mobile
          if (mobile === '') {
            return false
          } else {
            this.loading = true
            let _searchForm = {}
            _searchForm.mobile = mobile
            console.log(_searchForm)
            this.$loading()
            setTimeout(() => {
              this.$loading().close()
              this.loading = false
            }, 500)
          }
          break
        case 'cardCode':
          const cardCode = this.searchForm.cardCode
          if (cardCode === '') {
            return false
          } else {
            this.loading = true
            let _searchForm = {}
            _searchForm.cardCode = cardCode
            console.log(_searchForm)
            this.$loading()
            setTimeout(() => {
              this.$loading().close()
              this.loading = false
            }, 500)
          }
          break
      }
    },

    // 查看详情
    handleDetail (row) {
      let uid = row.uid
      this.$router.push({
        path: 'detail',
        query: {
          uid: uid
        }
      })
    },

    // 选中事件
    handleSelectionChange (val) {
      let tmp = []
      val.map(element => {
        tmp.push(element.uid)
      })
      this.selection = tmp
      console.log(tmp)
    },

    // 分页事件
    handleCurrentChange () {
      console.log(this.customer.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },

    // 群发事件
    handleCommand (command) {
      console.log(command)
    }
  }
}
</script>

<style lang="less">

</style>
